<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">搜索</text></template>
    </GlobalTopBar>
    <view class="page_content">
      <view class="topboxs">
        <SearchInput @search="handleSearch" focus />
      </view>
      <view class="centers">
        <!-- refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="handleRefresh"
          @scrolltolower="handleLoadMore"
          refresher-background="#f5f5f5"
          refresher-threshold="80" -->
        <!-- 内容 -->
        <scroll-view class="scroll-Y" scroll-y>
          <view class="ulList" v-for="(item, key) in goods_list" :key="key">
            <view class="ul_title border_b">{{ item.category_name }}</view>
            <template v-for="(i, y) in item.items" :key="y + 1">
              <view
                v-if="y < 3 || item.isShow"
                class="li"
                @click="
                  store.to(`/pages/server/serverDetails?id=${i.id}&type=1`)
                "
              >
                <image :src="i.thumbnail" mode="aspectFill" />
                <view class="texts">
                  <view>
                    <view class="t1">{{ i.goods_title }}</view>
                    <view class="desc">{{ i.desc }}</view>
                  </view>
                  <view class="t2"
                    >￥<text>{{ i.buy_price }}</text
                    >起</view
                  >
                </view>
                <view class="btns">立即预约</view>
              </view>
            </template>
            <view
              class="ckgd flex_center"
              v-if="item.items?.length > 3 && !item.isShow"
              @click="item.isShow = true"
            >
              查看更多服务<uni-icons
                type="down"
                size="18"
                color="#999"
              ></uni-icons>
            </view>
          </view>
          <view
            class="flex_center wfw_box"
            v-if="!Object.keys(goods_list).length"
          >
            <image
              class="s1_img"
              :src="`${store.imgDomain}sousuo_1.png`"
              mode="widthFix"
            />
            <text>对不起，没有找到你想要的服务</text>
            <view class="ss">
              <image
                class="zs_img zs1"
                :src="`${store.imgDomain}sousuo_2.png`"
                mode="scaleToFill"
              />
              <image
                class="zs_img zs2"
                :src="`${store.imgDomain}sousuo_2.png`"
                mode="scaleToFill"
              />你还可以试试</view
            >
            <button
              style=""
              id="contactBtn"
              class="flex_center"
              open-type="contact"
              bindcontact="onContact"
            >
              <view class="rgkf flex"
                ><image
                  class="kf_img"
                  :src="`${store.imgDomain}sousuo_4.png`"
                  mode="scaleToFill" />
                我们还有人工<text>客服服务</text>，试试联系他们
                <uni-icons type="right" size="18"></uni-icons
              ></view>
            </button>

            <view
              class="rgkf flex"
              @click="uni.redirectTo({ url: '/pages/services/index' })"
              ><image
                class="kf_img"
                :src="`${store.imgDomain}sousuo_3.png`"
                mode="scaleToFill" />
              我们还提供了清晰的<text>分类目录</text>，再试试
              <uni-icons type="right" size="18"></uni-icons
            ></view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  computed,
  reactive,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import Drawer from '@/components/Drawer.vue';
import { validatePhone } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

// 控制抽屉显示状态
const store = useCounterStore();
const topBarRef = ref();
const categoryList = ref([]);
const isRefreshing = ref(false); // 下拉刷新状态
const isLoading = ref(false); // 加载更多状态
const isNext = ref(true);
const goods_list = ref({});
const pageNum = ref(1);
const pageSize = ref(10);
const inputValue = ref('');
// 下拉刷新处理
const handleRefresh = () => {
  // 重置状态
  pageNum.value = 1;
  isRefreshing.value = true;
  // 重新加载数据
  getGoodsListByKeyword(true);
};
// 触底加载更多处理
const handleLoadMore = () => {
  if (!isNext.value || isLoading.value) return;
  // 加载下一页
  pageNum.value++;
  isLoading.value = true;
  getGoodsListByKeyword();
};

// 给定分类Id获取服务项目列表数据（分页）
// const getGoodsListByKeyword = async (isRefresh = false) => {
//   try {
//     const data = await request('wxapp/index/getGoodsListByKeyword', {
//       keywords: inputValue.value,
//     });
//     isNext.value = data.page.isNext;
//     if (isRefresh) {
//       goods_list.value = [...data.list];
//     } else {
//       goods_list.value = [...goods_list.value, ...data.list];
//     }
//   } finally {
//     isRefreshing.value = false;
//     isLoading.value = false;
//   }
// };

const getGoodsListByKeyword = async (isRefresh = false) => {
  const data = await request('wxapp/index/getGoodsListByKeyword', {
    keywords: inputValue.value,
  });

  for (let key in data.list) {
    data.list[key]['isShow'] = false;
  }
  console.log(data.list);

  goods_list.value = data.list;
};
const handleSearch = (val) => {
  inputValue.value = val;
  getGoodsListByKeyword(true);
};
onLoad(() => {});
</script>

<style scoped lang="scss">
.topbars {
  background: linear-gradient(to right, #3c9fff, #3184ff);
}
.page_content {
  box-sizing: border-box;
  background-color: #f5f5f7;
  .topboxs {
    box-sizing: border-box;
    padding: 20rpx;
    background: linear-gradient(to right, #3c9fff, #3184ff);
  }
  .centers {
    box-sizing: border-box;
    padding: 20rpx;
  }
}
.scroll-Y {
  position: relative;
  height: 80vh;
}
.ulList {
  border-radius: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  .ul_title {
    padding-bottom: 20rpx;
  }
  .li {
    position: relative;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    image {
      width: 188rpx;
      height: 188rpx;
    }
    .texts {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      height: 188rpx;
      box-sizing: border-box;
      padding: 10rpx 0 10rpx 20rpx;
      .t2 {
        margin-top: 20rpx;
        color: #ff0000;
      }
      .t1 {
        font-size: 30rpx;
        font-weight: 700;
      }
      .desc {
        font-size: 24rpx;
        color: $uni-text-color-grey;
      }
    }
    .btns {
      position: absolute;
      bottom: 30rpx;
      right: 0rpx;
      background-color: #0085f2;
      padding: 0 20rpx;
      line-height: 52rpx;
      border-radius: 26rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
  .ckgd {
    line-height: 50rpx;
    border-radius: 10rpx;
    background-color: #f5f5f7;
    color: $uni-text-color-grey;
    margin-top: 20rpx;
  }
}
.wfw_box {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  margin-bottom: 30rpx;
  text {
    color: $uni-text-color-grey;
  }
  .s1_img {
    width: 200rpx;
    margin-bottom: 30rpx;
  }
  .ss {
    margin: 100rpx 0 40rpx;
    position: relative;
    font-weight: 700;
    text-align: center;
    .zs_img {
      width: 47rpx;
      height: 33rpx;
    }
    .zs1 {
      position: absolute;
      top: 50%;
      left: -70rpx;
      transform: translateY(-50%);
    }
    .zs2 {
      position: absolute;
      top: 50%;
      right: -70rpx;
      transform: translateY(-50%);
    }
  }
  .rgkf {
    width: max-content;
    margin: 0 auto 30rpx;
    .kf_img {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
    }
    text {
      color: #5d9cf0;
    }
  }
}
</style>
